<template>
    <div style="text-align: center">
        <div style="margin-top: 150px; font-size: 100px; ">404</div>
        <div style="font-size: 50px">未找到页面</div>
        <span style="color: red; font-size: 20px">将于{{seconds}}s后返回主页</span>
        <div>
            <el-button type="text" style="margin-top: 20px; font-size: 20px" @click="$router.push('/')">立即返回主页
            </el-button>
        </div>
    </div>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "404",
    data(){
        return{
            seconds: 3
        }
    },

    watch: {
        seconds(newValue){
            if(!newValue) this.$router.push('/')
        }
    },

    mounted(){
        this.timer = setInterval(() => {
            this.seconds--;
        }, 1000 )
    },

    beforeDestroy() {
        clearInterval(this.timer);  //【注】在组件卸载前关闭定时器，防止开的线程过多
    }
}
</script>

<style scoped>

</style>
